<template>
	<view>
		<!-- 排行榜分类 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#00d5c7"
			bar-width="100" bar-height="5" class="history"></u-tabs>
		<view class="pin">
			<image src="../../static/img/aaaa.jpg" mode=""></image>
		</view>
		<!-- 内容 -->
		<view class="conten" v-for="(item,index) in arr" :key="index">
			<view class="one">{{item.id}}</view>
			<view class="conten-left">
				<view class="">{{item.name}}</view>
				<view class="currency">
					<text>{{item.rankpeop}}+人已购买</text>
					<text>{{item.risk}}</text>
					<text>{{item.ranktype}}</text>
				</view>
			</view>
			<view class="conten-right">
				<view class="">{{item.percent}}</view>
				<view class="">{{item.ranknew}}</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		rank,
		ranka
	} from "../../API/foodShop.js"
	export default {

		data() {
			return {
				list: [{
					name: '热销榜'
				}, {
					name: '定投榜'
				}, {
					name: '人气榜'
				}, {
					name: '精选榜'
				}],
				current: 0,
				arr: []
			}
		},
		methods: {
			// 内容接口
			// 热销榜
			fun() {
				rank().then((res) => {
					if (res.data.code == 200) {
						this.arr = res.data.data
					} else {
						console.log(111);
					}
				})
			},
			// 定投榜
			fun1() {
				ranka().then((res) => {
					if (res.data.code == 200) {
						this.arr = res.data.data
					} else {
						console.log(111);
					}
				})
			},
			// 排行榜分类切换
			change(index) {
				this.current = index;
				switch (index) {
					case 0:
						this.fun();
						break;
					case 1:
						this.fun1()
				}
			}
		},
		onShow() {
			this.fun(),
				this.fun1()
		},

	}
</script>

<style scoped>
	.pin image {
		width: 100%;
		height: 300rpx;
	}

	/* 排行榜分类 */
	.history {
		width: 100vw;
		position: fixed;
		top: 0rpx;
		z-index: 999;
	}

	/* 内容 */
	.conten {
		display: flex;
		justify-content: space-around;
		justify-content: center;
		height: 160rpx;
		position: relative;
		padding: 10rpx;
		border-bottom: 1rpx solid #eaeaea;
	}

	.one {
		position: absolute;
		left: 20rpx;
		top: 60rpx;
		font-size: 36rpx;
		color: #949494;
	}

	.conten-left {
		width: 65%;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		margin-left: 35rpx;
	}

	.conten-left view:nth-child(1) {
		font-size: 36rpx;
	}

	.currency text {
		border: 1rpx solid orange;
		color: orange;
		padding: 5rpx;
		margin-right: 8rpx;
	}

	.currency text:nth-child(3) {
		border: 1rpx solid #9e9e9e;
		color: #595959;
	}

	.conten-right {
		/* background-color: pink; */
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		width: 25%;
	}

	.conten-right view:nth-child(1) {
		font-size: 36rpx;
		color: red;
		font-weight: 600;
	}

	/* 瀑布流设置 */
</style>